<html>
    <head>
        <meta charset="utf-8">
        <title>绘制图元</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>

        <link rel="stylesheet" type="text/css" href="../lib/plugins/draw/leaflet.draw.css"/>
        <script type="text/javascript" src="../lib/plugins/draw/leaflet.draw.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                map = L.map("mapDiv", {
                    layers:[
                        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')
                    ],
                    center: [0,0],
                    zoom: 1,
                });

                var editableLayers = new L.FeatureGroup().addTo(map);

                var MyCustomMarker = L.Icon.extend({
                    options: {
                        shadowUrl: null,
                        iconAnchor: new L.Point(12, 12),
                        iconSize: new L.Point(24, 24),
                        iconUrl: "../images/pin_2_64.png",
                    }
                });

                var options = {
                    position: 'topright',
                    // draw: {
                    //     polyline: {
                    //         shapeOptions: {
                    //             color: '#f357a1',
                    //             weight: 10
                    //         }
                    //     },
                    //     polygon: {
                    //         allowIntersection: false, // Restricts shapes to simple polygons
                    //         drawError: {
                    //             color: '#e1e100', // Color the shape will turn when intersects
                    //             message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
                    //         },
                    //         shapeOptions: {
                    //             color: '#bada55'
                    //         }
                    //     },
                    //     circle: false, // Turns off this drawing tool
                    //     rectangle: {
                    //         shapeOptions: {
                    //             clickable: true
                    //         }
                    //     },
                    //     marker: {
                    //         icon: new MyCustomMarker()
                    //     }
                    // },
                    edit: {
                        featureGroup: editableLayers, //REQUIRED!!
                        remove: false
                    }
                };

                var drawControl = new L.Control.Draw(options);
                map.addControl(drawControl);

                map.on(""L.Draw.Event.CREATED"", function (e) {
                    var type = e.layerType,
                        layer = e.layer;
                
                    if (type === 'marker') {
                        layer.bindPopup('A popup!');
                    }
                
                    editableLayers.addLayer(layer);
                });
            }
        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



